<template>
  <div class="recordDetail">
    <Navbar appTitle="库存详情" />
    <!--头部-->
    <div class="d-head">
      <div class="content">
        <div class="right">
          <img class="rightImg" :src="imgUri" alt="" />
        </div>
        <div class="left">
          <div class="title">
            {{ detailInfo.goodsName }}
          </div>
          <div class="row">
            <span class="r-label">物品编号：</span>
            <span class="r-column">{{ detailInfo.goodsCode }}</span>
          </div>
          <div class="row" style="margin-top: 0.04rem">
            <span class="r-label">规格：</span>
            <span class="r-column">{{ detailInfo.spec }}</span>
          </div>
          <div class="row" style="margin-top: 0.04rem">
            <span class="r-label">分类：</span>
            <span class="r-column">{{ detailInfo.pnameAndcName }}</span>
            <!-- <span class="r-column">{{ `${detailInfo.type ? detailInfo.type + '>' : ''}${detailInfo.categoryName}` }}</span> -->
          </div>
          <div class="row" style="margin-top: 0.1rem">
            <span class="type-tag">{{ detailInfo.type }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="otherTaps" style="margin-top: 1.76rem">
      <div class="content">
        <div class="cont-flex">
          <div class="row">
            <span class="r-label">合格品</span>
            <span class="r-column" style="color: #00b042"
              >{{ commafy(detailInfo.qualifiedNum)
              }}{{ detailInfo.basicUnit }}</span
            >
          </div>
          <div class="row">
            <span class="r-label">合格品(F)</span>
            <span class="r-column" style="color: #00b042">{{detailInfo.qualifiedNumTextAssistUnit || '--'}}</span>
          </div>
        </div>
        <div class="cont-flex" style="margin-top: 0.24rem">
          <div class="row">
            <span class="r-label">报废品</span>
            <span class="r-column"
              >{{ commafy(detailInfo.scrapNum)
              }}{{ detailInfo.basicUnit }}</span
            >
          </div>
          <div class="row">
            <span class="r-label">报废品(F)</span>
            <span class="r-column">{{detailInfo.scrapNumTextAssistUnit || '--'}}</span>
          </div>
        </div>
        <div class="cont-flex" style="margin-top: 0.24rem">
          <div class="row">
            <span class="r-label">安全库存</span>
            <span class="r-column"
              >{{ commafy(detailInfo.securityNum)
              }}{{ detailInfo.basicUnit }}</span
            >
          </div>
          <div class="row">
            <span class="r-label">安全库存(F)</span>
            <span class="r-column">{{detailInfo.securityNumTextAssistUnit || '--'}}</span>
          </div>
        </div>
        <div class="cont-flex" style="margin-top: 0.24rem">
          <div class="row">
            <span class="r-label">最大库存</span>
            <span class="r-column"
              >{{ commafy(detailInfo.maxNum) }}{{ detailInfo.basicUnit }}</span
            >
          </div>
          <div class="row">
            <span class="r-label">最大库存(F)</span>
            <span class="r-column">{{detailInfo.maxNumTextAssistUnit || '--'}}</span>
          </div>
        </div>
      </div>
    </div>
    <van-field-tab :dataSource="detailInfo.warehouseTypeVoList"></van-field-tab>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { wmsWarehouseQueryByGoodsId, pubAttachmentFile } from "@/api/system";
import { apiBaseUrlDownload } from "@/utils/request";
import { commafy } from "@/utils/util";
import VanFieldTab from './VanFieldTab.vue';
export default {
  components: { Navbar, VanFieldTab },
  data() {
    return {
      detailInfo: {},
      commafy,
      imgUri: require('@/assets/img/notPng.png'),
      active: 1,
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getDetail()
  },
  methods: {
    /* 获取详情 */
    getDetail() {
      let id = this.$route.query.id;
      wmsWarehouseQueryByGoodsId({ id }).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result
          if (res.result.attachment) {
            pubAttachmentFile({ id: res.result.attachment.split(',')[0] }).then((res) => {
              if (res.success) {
                let uri = res.result.uri
                uri = apiBaseUrlDownload + "jksaas-mgt/mgt/sys/common/static/" + uri
                this.imgUri = uri
              }
            })
          }
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.recordDetail {
  height: 100vh;
  overflow-x: hidden;
  .d-head {
    position: fixed;
    width: 100%;
    padding: 0.16rem 0.16rem 0.16rem 0.16rem;
    background: #ffffff;
    z-index: 999;
    .content {
      display: flex;
      justify-content: space-between;
      .left {
        width: 2.8rem;
        // border: 1px solid red;
        .title {
          font-size: 0.16rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 0.22rem;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .row {
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 0.1rem;
          .type-tag {
            height: 0.16rem;
            background: #f0f6fe;
            color: #1890ff;
            margin-right: 0.1rem;
            padding: 0.03rem 0.08rem;
            font-size: 0.11rem;
            border-radius: 0.03rem;
          }
        }
      }
      .right {
        // border: 1px solid red;
        width: 0.6rem;
        .rightImg {
          display: block;
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 0.05rem;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }

  .otherTaps {
    background: #ffffff;
    padding: 0.16rem 0.16rem 0;
    margin-top: 0.1rem;
    .content {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .cont-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .row {
          width: 50%;
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: 400;
          .r-label {
            color: #888888;
            display: block;
            width: 0.9rem;
          }
          .r-column {
            display: block;
            color: #191f25;
            width: 2.5rem;
            margin-top: 0.1rem;
          }
        }
      }
    }
    /deep/.van-tabs__line {
      background-color: #1890ff;
    }
  }
}
</style>
<style>